<template>
	<view class="groupBox">
		<up-sticky>
		<Header></Header>
		</up-sticky>
		<view class="boxOne">
			<view class="boxOneContent">
				<view class="ContentTitle">
					CRM管理系统
				</view>
				<view class="ContentTexBox">
					<view class="ContentTex">
						通过有效的客户关系管理，提升客户满意度
					</view>
					<view class="ContentTex">
						进而驱动企业销售增长和利润
					</view>
				</view>
				<view class="ContentBut" @click="handleShowSignup">
					申请使用
				</view>
			</view>
		</view>

		<view class="boxTwo">
			<view class="boxTwoContent">
				<view class="boxTwoContent-top">
					产品功能支持
				</view>
				<view class="boxTwoContent-boot">
					<div class="boxXin">crm管理系统</div>
					<div class="surroundBox">
						<div class="surround surround1">线索管理</div>
						<div class="surround surround2">组织架构</div>
						<div class="surround surround3">数据分析</div>
						<div class="surround surround4">微信管理</div>
						<div class="surround surround5">安全性高</div>
					</div>
				</view>
			</view>
		</view>
		
		<view class="boxThree">
			<view class="boxThreeContent">
				<view class="ContentBox">
					<view class="Content-text">
						提升销售业绩,减少客户流失
					</view>
					<view class="Content-text">
						优化流程,提升效率,降低成本
					</view>
				</view>
				<view class="ContentIpt">
					<up-input class="botInp" v-model="phoneNumber" placeholder="请输入手机号体验试用" border="surround" clearable>
						<template #suffix>
							<!-- <up-code ref="uCodeRef" @change="codeChange" seconds="20" changeText="X秒重新获取哈哈哈"></up-code> -->
							<up-button @click="getPhoneCode"
								style="background-color: #4168da; height: 49rpx; border-radius: 25rpx; color: #fff;"
								:text="tipPlay" size="mini"></up-button>
						</template>
					</up-input>
					<up-toast ref="uToastRef"></up-toast>
				</view>
			</view>
			<view class="Content-Img">
				<image src="../../static/crmImg/crmImg3.png" mode=""></image>
			</view>
		</view>
		
		<view class="boxFour">
			<view class="boxFour-top">
				功能齐全 私有化部署
			</view>
			<view class="boxFour-botto">
				  <up-scroll-list>
				        <view v-for="item in boxFourList" :key="item.id" @click="handleChangeBoxFourItem(item)">
				            <view class="botto-card" :class="{'bgbotto-card' : boxFourNum == item.id}">
				            	<view class="card-title">
				            		{{item.title}}
				            	</view>
								<view class="card-text">
									{{item.text}}
								</view>
				            </view>
				        </view>
				    </up-scroll-list>
			</view>
		</view>
		
		<Footer></Footer>
		
		<up-modal :show="showSignUp" @confirm="handleConfirm" title="立即试用" ref="uModal" @cancel="handleClose"
			showCancelButton cancelText="取消" confirmText="立即拨打">
<view class="hello">
			    <view class="iconfont fa-bodadianhua"></view>
			    <view>电话联系:</view>
			    <view>13261388898</view>
			  </view>
		</up-modal>
	</view>
</template>

<script setup>
	import Header from '../compontents/header.vue'
	import Footer from '../compontents/footer.vue'
	import {ref} from 'vue'
import api from '../../utils/request.js'
	const tipPlay = ref('立即试用')
	const boxFourNum = ref(1)
	const boxFourList = ref([
		{id:1,
		title:"个性自定义",
		text:"客户可根据自身行业痛点和特性配置个性化的行业应用,满足企业个性化管理需求"},
		{id:2,
		title:"一键呼出",
		text:"轻松拨打电话，无需手动输入号码，可通过一键快捷拨号，节省了时间并提高了工作效率"}
	])
	const phoneNumber = ref('')
	const showSignUp = ref(false)
	const uToastRef = ref(null)
	const signRefForm = ref(null)
	const handleChangeBoxFourItem = function(item){
		boxFourNum.value = item.id
	}
	const handleShowSignup = function() {
		showSignUp.value = true;
	}
	const handleClose = function() {
		showSignUp.value = false;
	}
	const handleConfirm = function() {
		uni.makePhoneCall({
		        phoneNumber: '13261388898', // 电话号码
		        success: function () {
		          console.log('拨打电话成功');
		        },
		        fail: function () {
		          console.log('拨打电话失败');
		        }
		      });
	}
	
	const getPhoneCode = function() {
		if (!phoneNumber.value) {
			uToastRef.value.show({
				type: 'error',
				icon: false,
				message: "请输入手机号",
			})
			return;
		}
		if (!/^1[3456789]\d{9}$/.test(phoneNumber.value)) {
			uToastRef.value.show({
				type: 'error',
				icon: false,
				message: "手机号码有误",
			})
		} else {
			api.post('v1/home/addTryUser', {
				phone: phoneNumber.value
			}).then((res) => {
				if (res.code !== 0) {} else {
					uToastRef.value.show({
						type: 'success',
						icon: false,
						message: res.msg,
					})
					phoneNumber.value = ""
				}
			}).catch(err => {
	
			})
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.u-form-item__body__left__content__label) {
		font-size: 25rpx;
	}
	
	:deep(.uni-input-placeholder) {
		font-size: 24rpx;
	}
	:deep(.u-input__content__field-wrapper__field){
		height: 0;
	}
	:deep(.u-modal__button-group__wrapper__text){
		font-size: 28rpx;
	}
	:deep(.u-modal__title){
		font-size: 28rpx;
	}
	.hello {
	  width: 100%;
	  height: 60px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 10px;
	  font-size: 16px;
	  .fa-bodadianhua {
	    color: #006bec;
	  }
	}
	.groupBox {
		width: 100%;
		height: 100%;

		.boxOne {
			height: 405rpx;
			background-image: url('../../static/crmImg/crmImg1.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 60% center;
			padding-top: 69rpx;

			.boxOneContent {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;

				.ContentTitle {
					color: #fff;
					font-size: 63rpx;
					font-weight: 600;
				}

				.ContentTexBox {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: center;
					color: #fff;
					font-size: 19rpx;
					font-weight: 500;
					gap: 12rpx;
				}

				.ContentBut {
					font-size: 22rpx;
					width: 153rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					color: #406eff;
					border-radius: 15rpx;
					background-color: #fff;
				}
			}
		}

		.boxTwo {
			height: 677rpx;
			padding:0 20rpx 90rpx 20rpx;

			.boxTwoContent {
				height: 100%;
				display: flex;
				flex-direction: column;


				.boxTwoContent-top {
					height: 156rpx;
					line-height: 156rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 600;
				}

				.boxTwoContent-boot {
					background-image: url('../../static/crmImg/crmImg2.png');
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center center;
					height: calc(100% - 156rpx);
					position: relative;
					.boxXin {
						position: absolute;
						top: calc(50% + 35rpx);
						left: 50%;
						color: #fff;
						transform: translate(-50%, -50%);
						font-size: 20rpx;
						// box-shadow: 0px 0px 15px #f3f3f3;
					}

					.surroundBox {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);

						.surround {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 110rpx;
							height: 25rpx;
							line-height: 25rpx;
							text-align: center;
							font-size: 20rpx;
							color: #4b4b4b;
							font-weight: 600;
						}

						.surround1 {
							transform: translateX(197rpx) translateY(-204rpx);
						}

						.surround2 {
							transform: translateX(252rpx) translateY(22rpx);
						}

						.surround3 {
							transform: translateX(-14rpx) translateY(176rpx);
						}

						.surround4 {
							transform: translateX(-300rpx) translateY(25rpx);
						}

						.surround5 {
							transform: translateX(-222rpx) translateY(-206rpx);
						}

					}
				}
			}
		}
		.boxThree {
			height: 338rpx;
			background-color: #4770fb;
			padding-top: 9rpx;
			position: relative;
			.Content-Img {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 278rpx;
				height: 192rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.boxThreeContent {
				height: 100%;
				display: flex;
				flex-direction: column;
				padding-left: 45rpx;
				align-items: left;
				justify-content: space-evenly;
				.ContentBox {
					display: flex;
					flex-direction: column;
					gap: 22rpx;
					color: #fff;
					font-size: 30rpx;
				}
				.botInp {
					width: 400rpx;
					height: 63rpx;
					border-radius: 40rpx;
					padding: 0 18rpx !important;
					background-color: #fff;
				}
			}
		}
		.boxFour {
			height: 468rpx;
			padding-bottom: 84rpx;
			.boxFour-top {
				height: 184rpx;
				text-align: center;
				line-height: 184rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
			.boxFour-botto {
				height: calc(100% - 184rpx);
				padding-left: 25rpx;
				.botto-card {
					width: 400rpx;
					height: 248rpx;
					box-shadow: 0rpx 10rpx 20rpx -2rpx #eee;
					border: 1rpx solid #eee;
					margin: 0 15rpx;
					background-color: #fff;
					display: flex;
					border-radius: 15rpx;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 0 25rpx;
					gap:16rpx;
					.card-title {
						color: #317ae0;
						font-size: 36rpx;
						font-weight: 550;
					}
					.card-text {
						font-size: 26rpx;
						font-weight: 450;
					}
					
				}
				.bgbotto-card {
					background-color: #4770fb;
					color: #fff;
					background-image: url('../../static/crmImg/crmImg0.png');
					background-repeat: no-repeat;
					background-position: 90% 70%;
					background-size: 40%;
					.card-title {
						color: #fff;
					}
				}
			}
		}
	}
</style>